<template>
  <div style="width:100%;height:100%">
    <Row>
      <iCol :span=" showDetail ? 24 : 10 ">
        <img style="width:100%" :src="src" alt />
      </iCol>
      <iCol span="14" v-show="!showDetail" class="context">
        <Collapse class="dataListDom">
          <Panel v-for="(data,index) in dataList" :key="index">
            <font v-html="data.title"></font>
            <p slot="content" v-html="data.context"></p>
          </Panel>
        </Collapse>

        <input v-model="data" style="display:none" />
        <Button @click="changeImage" class="buttonClass">展示细节</Button>
        <Button @click="updateData" class="buttonClass" style="right:120px">修改数据</Button>
      </iCol>
    </Row>
  </div>
</template>

<script>
import infoSrc from "../../assets/lifecycle.png";
import detail from "../../assets/detail.png";
import { datas } from "./data";
export default {
  data() {
    return {
      dataList: datas,
      src: infoSrc,
      data: 0,
      showDetail: false,
      pageHeight: 0
    };
  },
  methods: {
    updateData() {
      this.data = 123465;
    },
    changeImage() {
      this.src = detail;
      this.showDetail = true;
    }
  },
  beforeCreate() {
    console.log("beforeCreate");
    console.log(this);
  },
  created() {
    console.log("created");
    console.log(this);
  },
  beforeMount() {
    console.log("beforeMount");
    console.log(this);
  },
  mounted() {
    console.log("mounted");
    console.log(this);
    this.pageHeight = window.screen.availHeight;
  },
  beforeUpdate() {
    console.log("beforeUpdate");
    console.log(this);
  },
  updated() {
    console.log("updated");
    console.log(this);
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    console.log(this);
  },
  destroyed() {
    console.log("beforDestroy");
    console.log(this);
  }
};
// 浏览器在控制台打印出来的是原始数据的引用
// 虽然console.log都会去截取快照，但是就是如果两次console.log和对元素属性进行修改的顺序和时间十分的接近，这么这个console.log会打印出这个元素的引用，这个引用会显示修改后的元素属性
</script>

<style scoped>
.dataListDom {
  position: fixed;
  top: 4px;
  width: 55%;
  padding-right: 24px;
  overflow: auto;
}
.buttonClass {
  position: fixed;
  z-index: 9;
  bottom: 24px;
  right: 24px;
}

.context >>> .codeStyle {
  background-color: #dededeb5;
  padding: 4px;
  border-radius: 5px;
}

.context >>> .ivu-collapse-header {
  line-height: 28px;
  height: auto;
}
</style>
